<template>
 <div class="update">
    <div class="title">
      <h2>更新记录</h2>
    </div>
    <div class="box">
        <div class="date">
           <h3>2022.02.14</h3>
           <h4 class="add">&ensp;新增&ensp;</h4>
           到时候具体写点什么<br>
           <h4 class="up">&ensp;改进&ensp;</h4>
           到时候具体写点什么<br>
           <h4 class="fex">&ensp;修复&ensp;</h4>
           到时候具体写点什么<br>
           
        </div>
         <div class="date">
           <h3>2022.02.10</h3>
           <h4 class="add">&ensp;新增&ensp;</h4>
           到时候具体写点什么<br>
            <h4 class="add">&ensp;新增&ensp;</h4>
           到时候具体写点什么<br>
            <h4 class="add">&ensp;新增&ensp;</h4>
           到时候具体写点什么<br>
           <h4 class="up">&ensp;改进&ensp;</h4>
           到时候具体写点什么<br>
           <h4 class="fex">&ensp;修复&ensp;</h4>
           到时候具体写点什么<br> 
           <h4 class="fex">&ensp;修复&ensp;</h4>
           到时候具体写点什么<br>
           
        </div>
         <div class="date">
           <h3>2022.02.09</h3>
           <h4 class="add">&ensp;新增&ensp;</h4>
           到时候具体写点什么<br>
            <h4 class="add">&ensp;新增&ensp;</h4>
           到时候具体写点什么<br>
            <h4 class="add">&ensp;新增&ensp;</h4>
           到时候具体写点什么<br>
           <h4 class="up">&ensp;改进&ensp;</h4>
           到时候具体写点什么<br>
            <h4 class="up">&ensp;改进&ensp;</h4>
           到时候具体写点什么<br>
           <h4 class="up">&ensp;改进&ensp;</h4>
           到时候具体写点什么<br>
           <h4 class="fex">&ensp;修复&ensp;</h4>
           到时候具体写点什么<br> 
           <h4 class="fex">&ensp;修复&ensp;</h4>
           到时候具体写点什么<br>
           </div>
    </div>
  </div>

</template>

<style scoped>
.date{
  width: 100%;
  margin: 2rem;
  /* background-color: rgb(204, 218, 213); */
}
.add{
  height:1.5rem;
  width: 3.5rem;
  background-color: #8dc53ead;
  text-align: center;
  color: rgb(255, 255, 255);
  border-radius: 0.3rem;
  display: inline;
  margin-bottom: 2rem;
  line-height: 2;
}
.fex{
  height:1.5rem;
  width: 3.5rem;
  background-color: #f16321ab;
  text-align: center;
  color: rgb(255, 255, 255);
  border-radius: 0.3rem;
  display: inline;
  line-height: 2;
}
.up{
  height:1.5rem;
  width: 3.5rem;
  background-color: #00aeeeb4;
  text-align: center;
  color: rgb(255, 255, 255);
  border-radius: 0.3rem;
  display: inline;
  line-height: 2;
}
.text{
  display:inline;
}


.update {
  margin: 0 2rem;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5rem;
}

h2 {
  display: inline;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}
.box {
  /* text-align: center; */
  /* height: 10rem; */
  padding: 3.3rem;
  border-radius: 16px;
  color: rgb(82, 82, 82);
  background-color: var(--BG);
}

</style>